<template>
	<view class="home-con">
		<view class="cus-title">
			<image class="bg" src="../../static/img/bg1.png" mode=""></image>
			<view class="home-title">首页</view>
			<view class="home-person">
				<view class="home-head">
					<image style="width: 100%; height: 100%;" :mode="'aspectFill'"
						:src="'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'">
					</image>
				</view>
				<view class="head-det">
					<view class="head-name">{{userInfo.userName}}</view>
					<view class="head-samll">职称：{{userInfo.roleId}}</view>
				</view>
			</view>
		</view>
		<view class="home-meg">
			<view class="uni-flex uni-row">
				<view class="flex-item-3 " @click="toList('/pages/myApply/index')">
					<view class="meg-in meg-bg-p">
						<view class="line50 bg-img1">{{num?.applyTaskNum}}</view>
						<view>我的申请</view>
					</view>
				</view>
				<view class="flex-item-3 ">
					<view class="meg-in meg-bg-r" @click="toList('/pages/myTodoList/index')">
						<view class="line50 bg-img2">{{num?.todoTaskNum}}</view>
						<view>我的待办</view>
					</view>
				</view>
				<view class="flex-item-3 ">
					<view class="meg-in meg-bg-b" @click="toList('/pages/unreadMessage/index')">
						<view class="line50 bg-img3">{{num?.noticeNum}}</view>
						<view>系统消息</view>
					</view>
				</view>
			</view>
		</view>
		<view class="home-det">
			<view class="home-item" v-for="(item,index) in doList" :key='index'>
				<view class="item-in" :style="{'background':item.bgColor}" @click='itemToDo(index,item.path)'>
					<view>
						<image style="width: 41px; height: 41px;border-radius: 50%;" :mode="'aspectFill'"
							:src="item.icon"></image>
					</view>
					<view class="dotitle">{{item.title}}</view>
					<view class="dot" v-if="item.isShowDot">
						
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app";
	import { noticeNum ,todoList} from '@/common/api/myApply.ts'
	import JWTAccountVO from '/@/entity/common/vo/JWTAccountVO';
	import { MessagePopup } from '/@/utils/MessagePopup';
	
	type ModuleDom={
		bgColor: string,
		icon: string,
		title: string,
		path: string,
		isShowDot:boolean
	}

	const isShow = ref(false);
	const selectGo = ref();
	const doList = ref<ModuleDom[]>([]);
	const userInfo = ref<JWTAccountVO>(new JWTAccountVO());
	const num = ref()
	doList.value = [{
			bgColor: '#FCFBF4',
			icon: '../../static/img/icon4.png',
			title: '待办事项',
			path: '/pages/myTodoList/index',
			isShowDot:false  //是否展示菜单上的小红点
		}, 
		{
			bgColor: '#F1F8F6',
			icon: '../../static/img/icon7.png',
			title: '资产管理',
			path: '/pages/assets/assetManage/index',
			isShowDot:false
		},
		{
			bgColor: '#F1F8F6',
			icon: '../../static/img/icon3.png',
			title: '资产盘点',
			path: '/pages/checkAssets/index',
			isShowDot:false
		},
		{
			bgColor: '#F1F8F6',
			icon: '../../static/img/icon5.png',
			title: '资产领用',
			path: '/pages/assets/assetReceive/index',
			isShowDot:false
		},
		{
			bgColor: '#F4F5FE',
			icon: '../../static/img/icon1.png',
			title: '巡检管理',
			path: '',
			isShowDot:false
		},
	]
	onShow(()=>{
		uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				// console.log('123456',res.data);
				userInfo.value = res.data;
			},
			fail: function() {
				MessagePopup.showOnlyConfirmModal('登录凭证失效,请重新登录!',()=>{
					uni.redirectTo({
						url: `/pages/login/login`,
					})
				})
			},
		});
		//getNum()
		//getTodoList()
	})
	

	function itemToDo(i: number, path: string) {
		if (path) {
			uni.navigateTo({
				url: path,
			})
		}
		if (i == (doList.value.length-1)) {
			uni.navigateTo({
				url: `/pages/qrCode/qrCode?tip=无法扫描？直接进入巡检列表&successUrl=/pages/ipqc/index&clickTipUrl=/pages/ipqc/index`,
			})
			// uni.navigateTo({
			// 	url: `/pages/ipqc/index`,
			// })
		}
	}

	const toList = (str: string): void => {
		uni.navigateTo({
			url:str
		})
	}
	//消息数量
	// const getNum = ()=>{
	// 	noticeNum().then((res:any)=>{
	// 		if(res.code==0) num.value=res.data
	// 	})
	// }
	// 获取待办任务列表
	// const getTodoList = ()=>{
	// 	todoList({page:1,rows:500}).then((res:any)=>{
	// 		if(res.code==0){
	// 			// console.log('-------------',res.data.records);
	// 			// ASSET_EXEC资产实施
	// 			let a = res.data.records.filter(item=>{
	// 				return item.taskType=='ASSET_EXEC'
	// 			})
	// 			if(a.length>0)doList.value[1].isShowDot=true
	// 			// ASSET_CHECK资产盘点
	// 			let b = res.data.records.filter(item=>{
	// 				return item.taskType=='ASSET_CHECK'
	// 			})
	// 			if(b.length>0)doList.value[2].isShowDot=true
	// 			// INSP_TASK INSP_RECTIFY INSP_CONFIRM 巡检相关
	// 			let c = res.data.records.filter(item=>{
	// 				return item.taskType=='INSP_TASK'||item.taskType=='INSP_RECTIFY'||item.taskType=='INSP_CONFIRM'
	// 			})
	// 			if(c.length>0)doList.value[4].isShowDot=true
	// 		}
	// 	})
	// }
</script>

<style scoped lang="scss">
	.bg-img1{
			background: url('../../static/img/0001.png') no-repeat center;
			background-size: auto 100%;
	}
	.bg-img2{
			background: url('../../static/img/0002.png') no-repeat center;
			background-size: auto 100%;
	}
	.bg-img3{
			background: url('../../static/img/0003.png') no-repeat center;
			background-size: auto 100%;
	}
	.home-con {
		height: 100%;
		width: 100%;
		background: #fff;
	}

	.cus-title {
		width: 100%;
		height: 300px;
		background-color: #fff;
		// background: url('../../static/img/bg1.png') no-repeat;
		// background-size: 100% auto;
		// background-position: top;
		position: fixed;
		top: 0;
	}
	.bg{
		position: absolute;
		width: 100%;
		z-index: -99;
		object-fit: contain;
	}

	.home-title {
		text-align: center;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
		padding-top: 30px;
	}

	.home-person {
		display: flex;
		align-items: center;
		padding: 20px;
	}

	.home-head {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}

	.head-det {
		padding: 0 20px;
		color: #fff;
	}

	.head-name {
		font-size: 18px;
		line-height: 30px;
	}

	.head-samll {
		font-size: 14px;
	}

	.home-meg {
		position: absolute;
		top: 320rpx;
		left: 50rpx;
		right: 50rpx;
		height: 100px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 2px #eee;
		padding: 10px;
		box-sizing: border-box;
		font-size: 12px;

		.meg-in {
			width: 90%;
			margin: 0 auto;
			height: 80px;
			border-radius: 5px;
			text-align: center;
			padding-top: 8px;
			box-sizing: border-box;
			.line50 {
				line-height: 50px;
				font-size: 24px;
			}
		}
	}

	.home-det {
		padding: 0 30px;
		position: absolute;
		top: 300px;
		bottom: 0px;
		padding-bottom: 20px;
		overflow: auto;
		z-index: 10;
		background-color: #fff;
	}

	.home-item {
		display: inline-block;
		width: 50%;
		height: 100px;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 0 10px;
		vertical-align: middle;
		text-align: center;
	}

	.item-in {
		width: 100%;
		height: 100%;
		border-radius: 20px;
		padding: 10px;
		box-sizing: border-box;
		position: relative;
	}

	.dotitle {
		font-size: 16px;
		color: #515151;
		line-height: 30px;
		font-weight: 600;
	}

	.sub-title {
		font-size: 12px;
		color: #C1C1C1;
	}

	.meg-bg-p {
		background-color: #f5f4fc;
		color: #aa88ff;
	}

	.meg-bg-r {
		background-color: #fcf0f0;
		color: #f58581;
	}

	.meg-bg-b {
		background-color: #eff3ff;
		color: #6898f4;
	}
	.dot{
		background-color: #f00;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: 0;
	}
</style>
